1. Description

1. Allow customers to define a nonce based CSP using either a meta tag or header, with cached nonce, with the keyword 'nonce-aem'.

Meta:

    <meta http-equiv="content-security-policy" content="script-src 'nonce-aem' 'strict-dynamic';  base-uri 'self'; objectsrc 'none';">

Header

content-security-policy: script-src 'nonce-aem' 'strict-dynamic'; base-uri 'self'; object-src 'none';

3. Developers need to also add nonce="aem" on:

• each script from head.html
• each script from static html files in github

Example:

<script nonce="aem" src="/scripts/aem.js" type="module"></script>
<script nonce="aem" src="/scripts/scripts.js" type="module"></script>

4. Add support for a move-as-header attribute for the meta based CSP, where the Helix Pipeline will that tag as a header

Note: if this feature is premature, I can remove it and file it as a separate PR

Example:

<meta http-equiv="content-security-policy" content="script-src 'nonce-aem' 'strict-dynamic'; base-uri 'self'; object-src 'none';" move-as-header="true">

5. The pipeline will generate a 16byte base64 encoded nonce, place it the aem part of the nonce-aem CSP and on each trusted script where it finds nonce="aem"

2. Implementation choice

After some back and forth between:

• having 'nonce' vs 'nonce-aem' as a keyword in the CSP
• requiring developers to add 'nonce="aem" or not to the scripts, to make it as friction-less and transparent as possible for devs.

I chose for the moment 'nonce-aem' and needing to add 'nonce="aem" to the scripts, because in this implementation if there's any reason to deactivate/remove or if the hlx pipeline fails to render the nonce, customers that have this enabled will still have a valid page that is rendered by the browser.
In the other variants, if for any reason 'nonce' is returned the browser will show just a white page.

3. Expected level of protection with a nonce cached on the CDN

1. Protected even if the nonce is cached

✅ .innerHTML for XSS
✅ .outerHTML for XSS
✅ .insertAdjecentHTML for XSS
✅ .setHTMLUnsafe for XSS
✅ eval / setTimeout / setInterval / Function for XSS
✅ javascript: protocol in the href/src attributes
✅ location.href / location.assign() / location.replace for XSS
✅ attribute event handlers (onclick, onblur, onload, onerror etc.) for XSS
✅ stored/reflected XSS

• as long as there is no server side manipulation of the HTML in the customer's CDN where user input is involved
• as long as the nonce is regenerated for requests that hit the origin
• for meta tag: as long as the XSS doesn't happen before the meta tag

2. not protected, because the nonce is cached

❌ document.write / document.writeln -> because you could get the nonce and use it in the exploit

3.not protected for other reasons

❌ document.createRange().createContextualFragment -> whether the nonce is cached/known is irrelevant, scripts are always executed with strict-dynamic. (needs ticket in https://github.com/w3c/webappsec-csp - awaiting OSS approval)
❌ src attribute of a <script> tag created by document.createElement('script') / text content of a <script> tag created by document.createElement('script') / import -> permitted by strict-dynamic

4. not protected by CSPs in general
Script-less attacks
❌ HTML injection
❌ DOM clobbering

5. unknown status
❓ element.style or cssText -> still researching, can’t find a working exploit even without CSP

4. Still TODO

• Backport to helix 4 in the 5.x branch.
• Validate that pages render correctly E2E in the helix 4 branch (helix5 doesn't support - hlx-pipeline-version)
• Add support in the aem cli for nonce on the live-reload script